<!-- 导航栏 -->
<template>
	<div class="tab">
		<router-link tag="div" class="tab-item" to="/recommend">
			<span class="tab-link">推荐</span>
		</router-link>
		<router-link tag="div" class="tab-item" to="/singer">
			<span class="tab-link">歌手</span>
		</router-link>
		<router-link tag="div" class="tab-item" to="/rank">
			<span class="tab-link">排行</span>
		</router-link>
		<router-link tag="div" class="tab-item" to="/search">
			<span class="tab-link">搜索</span>
		</router-link>
	</div>
</template>

<script type="text/ecmascript-6">
export default {};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable'
.tab
	display flex
	height 44px
	line-height 44px
	font-size $font-size-medium
	.tab-item
		flex 1
		text-align center
		.tab-link
			padding-bottom 5px
			color $color-text-l
		&.router-link-active
			.tab-link
				color $color-theme
				border-bottom 2px solid $color-theme
</style>
